<template>
  <div id="app">
    <top-menu v-if="!isLogin"/>
    <div class="viewContent" v-if="!isLogin">
      <div class="listContainer">
        <leftSideList @setWidth="setWidth" />
      </div>
      <div class="viewsContainer">
        <tabsBread />
        <div class="routerViews">
          <router-view style="height: 100%;" />
        </div>
      </div>
    </div>
    <router-view style="height: 100%;" v-else />
  </div>
</template>
<script>
import topMenu from "@/components/common/topmenu/index.vue"
import leftSideList from '@/components/common/leftSideList'
import tabsBread from '@/components/common/tabsbread'
export default {
  name: 'App', 
  data() {
    return {
      
    }
  },
  computed: {
    isLogin() {
      window.onresize = this.$route.name == null || this.$route.name == 'login' ? null : this.setWidth;
      return this.$route.name == null || this.$route.name == 'login'
    }
  },
  mounted() {
    window.onresize = this.isLogin ? null : this.setWidth;
  },
  components: {
    topMenu,
    leftSideList,
    tabsBread
  },
  methods: {
    setWidth() {
      let screenWidth = document.documentElement.clientWidth;
      let screenHeight = document.documentElement.clientHeight;
      let viewContent = document.querySelector('.viewContent')
      let viewsContainer = document.querySelector('.viewsContainer')
      let routerViews = document.querySelector('.routerViews')
      let sideWidth = document.querySelector('.leftSideListCan').offsetWidth;
      viewContent.style.setProperty('height', screenHeight - 80 + 'px')
      viewsContainer.style.setProperty('width', screenWidth - sideWidth + 'px')
      routerViews.style.setProperty('height', viewsContainer.offsetHeight - 48 + 'px')
      if(screenWidth < 800) {
        
      }
    }
  }
}
</script>

<style lang="less">
#app {
  font-family: "Microsoft YaHei","微软雅黑","Microsoft JhengHei","华文细黑",STHeiti,MingLiu,'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  width: 100%;
  height: 100%;
  overflow: hidden; 
  position: relative;
	>.routerView{
    height: 100%;
	}
}
.listContainer{
  height: 100%;
  overflow-y: auto;
  // overflow-x: hidden;
}
/*设置滚动条样式*/
.listContainer::-webkit-scrollbar {
    width: 4px;     
    height: 1px;
}
.listContainer::-webkit-scrollbar-thumb {
    border-radius: 1px;
    background: #ccc;
}
.listContainer::-webkit-scrollbar-track {/*滚动条里面轨道*/
    border-radius: 1px;
    background: #fff;
}


.viewsContainer{
  height: 100%;
}
.viewContent{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
}
</style>
